<template>
  <div class="content">
    <el-row>
      <el-col :xl="17" :lg="14" :md="14">
        <el-button-group v-if="checkedFiles.length <= 0 ">
          <el-button  icon="el-icon-upload" @click="upload">上传文件</el-button>
          <el-dropdown @command="doCommand">
            <el-button style="width: 120px;">
              新建<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                    v-for="(item,index) in command.create"
                    :key="index"
                    :command="item.command">
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button  icon='el-icon-download'>远程下载</el-button>
          <el-button  icon='el-icon-share' @click="this.$router.push({name: 'Push'})">推送到设备</el-button>

        </el-button-group>

        <el-button-group size="small" v-if="checkedFiles.length > 0 && checkedFiles[0].name != ''">
          <el-button icon="el-icon-share" @click="share">分享</el-button>
          <el-button icon="el-icon-download"
                     :disabled="currentFile.type == 'dir'?true:false"
                     @click="download">下载
          </el-button>
          <el-button icon="el-icon-delete" @click="deleted">删除</el-button>
          <el-button icon="el-icon-edit"
                     :disabled="checkedFiles.length > 1 ? true:false"
                     @click="setRename">重命名
          </el-button>
          <el-button icon="el-icon-copy-document" @click="copy">复制到</el-button>
          <el-button icon="el-icon-remove-outline" @click="move">移动到</el-button>
          <el-dropdown>
            <el-button>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>推送到设备</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </el-col>
<!--      <el-col :xl="12" :lg="8" :md="8">

      </el-col>-->
      <el-col :xl="7" :lg="10" :md="10">
        <el-input placeholder="请输入文件名" v-model="searchInput"></el-input>

        <el-button icon="el-icon-search" @click="doSearch"></el-button>

        <el-dropdown @command="doCommand">
          <el-button icon="el-icon-sort"></el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item,index) in command.sort"
                                :key="index"
                                :command="item.command">
                <i class="el-icon-check" v-if="currentSortField == item.command"></i>
                <i v-else class="el-icon-remove-outline" style="opacity: 0;"></i>
                {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-button icon="el-icon-s-grid" @click="changeStyle" v-if="style == 'table'"></el-button>
        <el-button icon="el-icon-s-data" @click="changeStyle" v-else></el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "HeaderBtn",
  props: {
    checkedFiles: {type: Array, default: []},
    currentFile: {type: Object, default: {}},
    currentPath: {type: Array, default: []},
    style: {type: String, default: ''},
    setRename:{type:Function,default:null},
    setTouch:{type:Function,default:null},
    setMkdir:{type:Function,default:null},
    download:{type:Function,default:null},
    share:{type:Function,default:null},
    deleted:{type:Function,default:null},
    copy:{type:Function,default:null},
    move:{type:Function,default:null},
    init:{type:Function,default:null},
    search:{type:Function,default:null},
    upload:{type:Function,default:null},
  },
  data() {
    return {
      searchInput: '',
      currentSortField: 'size',
      currentSortOrd: 'asc',
      command: {
        'sort': [
          {
            command: 'name',
            name: '文件名'
          },
          {
            command: 'size',
            name: '大小'
          },
          {
            command: 'mtime',
            name: '修改时间'
          }
        ],
        'create': [
          {
            command: 'mkdir',
            name: '新建文件夹'
          },
          {
            command: 'touch',
            name: '新建文件'
          },
        ]
      },
    };
  },
  methods: {
    changeStyle() {
      this.$emit('changeStyle', this.style == 'table' ? 'grid' : 'table');
    },
    doSearch() {
      this.search(this.searchInput);
    },
    doCommand(command) {
      if (command == 'filename' || command == 'size' || command == 'mtime') {
        this.currentSortOrd = this.currentSortOrd == 'asc' ? 'desc' : 'asc';
      }
      switch (command) {
        case 'name':
          //文件名排序
          this.currentSortField = 'name';
          this.init(this.currentPath.join('/'), 'name', this.currentSortOrd);
          break;
        case 'mtime':
          //修改时间排序
          this.currentSortField = 'mtime';
          this.init(this.currentPath.join('/'), 'mtime', this.currentSortOrd);
          break;
        case 'size':
          //大小排序
          this.currentSortField = 'size';
          this.init(this.currentPath.join('/'), 'size', this.currentSortOrd);
          break;
        case 'mkdir':
          this.setMkdir();
          break;
        case 'touch':
          this.setTouch();
          break;
        default:
          this.$message('未知命令');
          return;
      }
    },
  }
}
</script>

<style scoped>
.content {
  width: 100%;
}

.content .el-col{
  display: inline-block;
}

.content .el-col .item {
  display: inline-block;
  margin-left: 15px;
  width: 29%;
}

.content .el-col .item>.el-dropdown{
  width: 100%!important;
}

.content .el-col .el-input{
  width: 58%!important;
}

.content .el-col:last-child button {
  margin: 0;
  display: inline;
}

</style>